<template>
    <div>
        <el-select v-model="value" placeholder="Select" size="large" style="width: 240px" @change="clearSecondSelect(value)">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <br />
        <el-select v-model="valueSecond" placeholder="Select" style="width: 240px">
            <el-option v-for="item in optSecond" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>

</template>

<script lang="js" setup>

import { ref } from 'vue'

const value = ref('')
const valueSecond = ref('')
const options = [
    {
        label: '电子产品',
        value: '1',
    },
    {
        label: '生活用品',
        value: '2',
    },
    {
        label: '户外运动',
        value: '3',
    },
]
const optionsSecond = {
    '1': [
        {
            label: '平板电脑',
            value: '1-1',
        },
        {
            label: '笔记本电脑',
            value: '1-2',
        },
        {
            label: '手机',
            value: '1-3',
        },
    ],
    '2': [
        {
            label: '沐浴露',
            value: '2-1',
        },
        {
            label: '洗发水',
            value: '2-2',
        },
        {
            label: '牙膏',
            value: '2-3',
        },
    ],
    '3': [
        {
            label: '跑鞋',
            value: '3-1',
        },
        {
            label: '公路车',
            value: '3-2',
        },
        {
            label: '爬山',
            value: '3-3',
        },
    ],
}
var optSecond = []
console.log(value.value);
console.log(handleChange(value));
// let optionsSeconds = handleChange(value)
function handleChange(value) {
    let options = [];
    for (let i = 0; i < value.length; i++) {
        options = options.concat(optionsSecond[value[i]]);
    }
    return options;

}
function clearSecondSelect(value) {
    this.valueSecond = '';
    this.optSecond = [];
    this.optSecond = handleChange(value);
    console.log(value);
}
</script>